<template>
	<div>
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="item in list" :key="item.id" class="lun" @click="jump(item.id)">
				<img :src="item.image" alt="" >
				<div class="word">
					<h3>{{ item.title }}</h3>
					<span>{{ item.hint }}</span>
				</div>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		mounted() {
			this.getlist()
		},
		methods: {
			getlist: function() {
				this.$http.get('http://chonghekj.com/daily/index.php/Home/daily/latest', {

					})
					.then((res) => {
						// console.log(res.data.top_stories)
						this.list = res.data.top_stories
					})
			},
			jump:function(id){
				// console.log(id)
				this.$router.push({
					path:'/xq',
					query:{id}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.lun{
		position: relative;
		img{
			width: 100%;
			height: 380px;
		}
	}
	.word {
		width: 80%;
		position: absolute;
		bottom: 5%;
		left: 5%;
		h3{
			color: #FFFFFF;
		}
		span{
			color: #DCDEE0;
		}
	}
</style>
